<script setup lang="ts">
import Copy from "@/components/copy/index.vue";
import { CardDate } from "./scripts/card";
import { onMounted, toRaw } from "vue";
import Operate from "./operate.vue";
const props = defineProps({
    cardData: Object
});
const item: CardDate = toRaw(props.cardData) as any;
onMounted(() => {
    // console.log('yzt', item);
});
</script>
<template>
    <VCard class="card d-flex flex-column">
        <div class="row_1 d-flex justify-space-between">
            <div class="d-flex flex-1-1">
                <VIcon>mdi mdi-arrow-up-circle-outline</VIcon>
                &nbsp;&nbsp;
                <div class="d-flex flex-column">
                    <!-- <span >{{ item.address }}</span> -->
                    <p class="label">
                        <Copy :text="item.address"></Copy>
                    </p>
                    <span>send</span>
                </div>
                &nbsp;&nbsp; <VIcon>mdi mdi-arrow-right-thin</VIcon>&nbsp;&nbsp;
                <p class="label">
                    <Copy :text="item.toAddress"></Copy>
                </p>
            </div>
            <span>{{ item.time }}</span>
        </div>
        <div class="row_2 my-3 d-flex">
            <!-- <img src="" alt=""> -->
            <VIcon>mdi mdi-arrow-up-circle-outline</VIcon>&nbsp;&nbsp;
            <div class="d-flex justify-space-between" style="width: 100%">
                <div class="d-flex">
                    <span style="color: var(--lose)">{{ item.outAmount }}</span
                    >&nbsp;&nbsp;
                    <span>#{{ item.outSymbol }}</span>
                </div>
                <span style="color: white; font-weight: bold">${{ item.outusdt }}</span>
            </div>
        </div>
        <Operate class="row_3"></Operate>
    </VCard>
</template>

<style scoped lang="less">
.card {
    padding: 10px;
    font-size: 11px;
    color: #b1b6c6;
    background-color: #202329;
}
.label {
    max-width: 80px;
    text-overflow: ellipsis;
    overflow: hidden;
    // background-color: #ff0 !important;
}

.row_2 {
    opacity: 1;
}

.row_3 {
    opacity: 1;
}
:deep(.copy-txt) {
    color: #fff !important;
}
</style>
